<template>
  <span>
                <div id="songsheet" v-for="item in sheetarr">
                    <router-link :to="{path:'/yunyin/sheet',query:{sheetid:item.id}}">
                <img id="sheetimg" :src="item.coverImgUrl" alt="">
                <div>{{item.name}}</div>
                   </router-link>
            </div>
    <router-view></router-view>
</span>
</template>

<script>
import axios from 'axios'
import store from '../../store'
export default {
    name:'hotsheet',
    data(){
        return{
            sheetarr:'',
        }
    },
    mounted:function(){
        this.loading();
    },
    methods:{
         loading: function() {
                    let that = this;
                    axios.get("http://39.101.203.189:3000/top/playlist/highquality").then(function(response) {
                        console.log(response.data.playlists[1]);
                        let res = response.data.playlists;
                        let arr = new Array(4);
                        for (let i = 0; i < 4; i++) {
                            arr[i] = res[i];
                        }
                        // console.log(arr);
                        that.sheetarr = arr;
                        // console.log(that.sheetarr[1].id)
                    }, function(err) {})
                },
    }

}
</script>

<style scoped>
#songsheet {
     position: relative;
     left: 50px;
     top: -5px;
     width: 200px;
     height: 214px;
     margin-right: 100px;
     background-color: #2e2526;
     color: #fff;
     text-align: left;
     display: inline-block;
     vertical-align: top;
 }
 
 #sheetimg {
     position: relative;
     width: 100%;
     height: 78%;
 }
 a{
     color: aliceblue;
     text-decoration: none;
 }
</style>